<template>
  <div class="wrap">
    <div class="content">
    <!-- left -->
    <section id="ileft" class="lfloat">
    <div class="loadmore-wrapper">
      <mt-loadmore @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :autoFill="autoFill" :topDistance="topDistance" :bottomDistance="bottomDistance" ref="loadmore">
        <ul>
          <li v-for="item in articles" class="Litem">
            <h2><a :href="'/content/'+item.id">{{item.title}}</a></h2>
              <p class="intro">{{item.intro}}</p>
              <dl class="info">
                  <dt><a href="#"><img :src="item.userPic" alt="用户头像"></a></dt>
                  <dd class="userName"><a href="#">{{item.author}}</a></dd>
                  <dd class="postDate">{{item.postD}}</dd>
                  <dd class="tag"><span>{{item.tag}}</span>(<em>{{item.type}}</em>)</dd>
                  <dd class="readNum rfloat">
                      <i class="read"></i><span class="readN">{{item.readN}}</span>
                      <i class="tuijian"></i><span class="tuijianN">{{item.recommendN}}</span>
                  </dd>
              </dl>
          </li>
        </ul>
      </mt-loadmore>
    </div>
    </section>
    <!-- left -->
    <!-- right -->
    <hot v-show="allLoaded"></hot>
    <!-- right -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
import hot from './hot';

export default {
  name: 'commonList',
  data () {
    return {
      bottomStatus:'',
      articles:[],
      page:1,
      pageSize:6,
      maxPage:0,
      total:0,
      tag:'',
      title:'',
      author:'',
      autoFill:true,
      allLoaded: false,
      topDistance:50,
      bottomDistance:120,
      scrollMode:"auto",
      topMethod:this.loadTop
    }
  },
  components:{hot},
  beforeMount(){
    this.setTag();
  },
  mounted(){
    this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);

  },
  updated(){
    this.setHeight();
    this.delHeight();
  },
  methods:{
    getArticles:function(rpage,rpageSize,rtag,rtitle,rauthor){
      this.$http({
        url :'http://www.eblog.site/eblog/mgGetArticleByAuthor',
        //{headers:{'Accept':'application/json','Content-Type':'application/json'}},
        method : 'post',
        params :{page:rpage,pageSize:rpageSize,tag:this.tag,title:rtitle,author:rauthor},
        emulateJSON: true
      }).then(function (response) {
          let listLength = response.body.pageInfo.list.length;
          for(var i=0;i<listLength;i++){
            this.articles.push(response.body.pageInfo.list[i]);
          }
          this.total = response.body.pageInfo.total;
          this.maxPage = response.body.pageInfo.pages;
          this.page++;
        },function (response) {
        }
      )
    },
    handleTopChange:function(status) {
      this.topStatus = status;
    },

    handleBottomChange:function(status) {
      this.bottomStatus = status;
    },
    loadTop:function(){
      // 加载更多数据
      window.location.reload();
    },
    loadBottom:function(){
      this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);
      this.$refs.loadmore.onBottomLoaded();
      if(this.page==this.maxPage){
        this.allLoaded=true;
      }
    },
    setHeight:function(){
      let swipeBH = document.querySelector(".swipeBox").style.height;
      let winH = window.innerHeight;
      document.getElementById('app').style.height = window.innerHeight+'px'; 
      document.querySelector(".loadmore-wrapper").style.height=winH-parseInt(swipeBH)-80+'px';
    },
    delHeight:function(){
      if(this.allLoaded==true){
        document.getElementById('app').style.height = 'auto';
      }
    },
    setTag:function(){
      switch(this.$route.params.tag){
        case 'home':
          this.tag='';
          break;
        case 'jsbw':
          this.tag='技术博文';
          break;
        case 'yytj':
          this.tag='影音推荐';
          break;
        case 'msfx':
          this.tag='美食分享';
          break;
        case 'shjq':
          this.tag='生活技巧';
          break;
        case 'xhdq':
          this.tag='笑话大全';
          break;
        default:
          this.tag='';
      };
    }
  },
  watch:{
    '$route' (to,from){
      this.setTag();
      if(to.name === 'commonList'){
        this.articles=[];
        this.page=1;
        this.allLoaded=false;
        this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loadmore-wrapper{
  overflow:scroll;
}
</style>
